import React, { Component } from 'react';
import './HCvip.css'
import { Flex } from 'antd-mobile';
import Img from '../../img/title.png'
import * as api from '../../uitls/api'

class HCvip extends Component {
    constructor() {
        super()
        this.state = {
            dataList: []
        }
    }
    liji(num) {
        this.props.history.push('/Home/ShopDetails/' + num)
    }
    fanhui = () => {
        this.props.history.push('/Home/MyInfo')
    }
    componentDidMount() {
        console.log(this.props.match.params.userId);
        this.axios({
            url: api.GET_Queryvip,
            method: 'get',
            params: {
                user_id: this.props.match.params.userId
            }
        }).then(data => {
            console.log(data.data.data);
            if (data.data.code === 200) {
                this.setState({
                    dataList: data.data.data
                })
            }
        })
    }
    initdome = () => {
        return this.state.dataList.map((item, i) => {
            return <div className='vip_bgc' key={i}>
                <Flex>
                    <div className='vip_img'>
                        <img src={Img} alt="" />
                    </div>
                    <div className='vip_text'>
                        <div>{item.shop_name}</div>
                        <div>会员</div>
                    </div>
                    <div className='vip_jifen'>
                        <div onClick={() => this.liji(item.shop_id)}>
                            立即使用
                        </div>
                    </div>
                </Flex>
            </div>
        })
    }
    render() {
        return (
            <div className='vip_box'>
                <Flex style={{ backgroundColor: '#FFD656' }}>
                    <Flex.Item>
                        <div className='vip_title_icon'>
                            <i className="iconfont icon-jiantouarrowhead7" onClick={this.fanhui}></i>
                        </div>
                    </Flex.Item>
                    <Flex.Item>
                        <div className="vip_sub-title">我的会员</div>
                    </Flex.Item>
                    <Flex.Item></Flex.Item>
                </Flex>
                <div>
                    {this.initdome()}
                </div>
            </div>
        );
    }
}

export default HCvip;